<template>
  <div class="header flex justify-between align-center">
    <div class="flex justify-between align-center">
      <icon-svg iconName="LOGO" :w="60" :h="60" />
    </div>
    <div>
      <el-button
        type="primary"
        round
        size="mini"
        :loading="isPreLoading"
        @click="preHandler()"
      >
        预览和设置
      </el-button>
      <el-button
        type="primary"
        round
        size="mini"
        :loading="isSaveLoading"
        @click="saveHandler()"
      >
        保存
      </el-button>
      <el-button
        type="primary"
        round
        size="mini"
        :loading="isPushLoading"
        @click="pushHandler"
      >
        发布
      </el-button>
    </div>
    <Publish v-model="isPublish"></Publish>
    <Preview
      v-if="isPreview"
      @pushHandler="pushHandler"
      @saveHandler="saveHandler"
      @changePreview="isPreview = false"
    ></Preview>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, nextTick } from "vue";
import { useStore } from "vuex";
import { IGlobalDataProps } from "@/store/index.ts";
import useAppInstance from "@/hooks/useAppInstance";
import Publish from "@/components/Publish/index.vue";
import Preview from "@/components/Preview/index.vue";
import { takeScreenshotAndUpload } from "@/utils/index.ts";
import { CANVAS_FIX, UPDATE_CURRENT_ID, UPDATE_PAGE } from "@/utils/Const";
import { saveWorksApi } from "@/api/common.api";
export default defineComponent({
  components: {
    Publish,
    Preview,
  },
  setup() {
    const store = useStore<IGlobalDataProps>();
    const isPreLoading = ref<boolean>(false);
    const isPushLoading = ref<boolean>(false);
    const isSaveLoading = ref<boolean>(false);
    const isPublish = ref<boolean>(false);
    const isPreview = ref<boolean>(false);
    const { globalFunc } = useAppInstance();

    let pageData = computed(() => store.state.editor.page);

    // 预览
    let preHandler = async () => {
      try {
        isPreLoading.value = true;
        await saveWorksApi(getPageDataParams());
        isPreview.value = true;
      } catch (error) {
      } finally {
        isPreLoading.value = false;
      }
    };

    let getPageDataParams = () => {
      let {
        components,
        page: { title, setting, props, coverImg, desc },
      } = store.state.editor;

      return {
        title,
        props,
        setting,
        coverImg,
        desc,
        components,
      };
    };

    // 修复截图出现黑色背景
    let fixScreenshots = () => {
      return new Promise(async (resolve, reject) => {
        try {
          store.commit(`editor/${UPDATE_CURRENT_ID}`, "");
          store.commit(`editor/${CANVAS_FIX}`, true);
          await nextTick();
          let url = await takeScreenshotAndUpload("preview-wrapper");
          store.commit(`editor/${CANVAS_FIX}`, false);
          store.commit(`editor/${UPDATE_PAGE}`, {
            key: "coverImg",
            v: url,
          });
          resolve(true);
        } catch (e) {
          reject();
        } finally {
          store.commit(`editor/${CANVAS_FIX}`, false);
        }
      });
    };

    // 保存
    let saveHandler = async () => {
      try {
        isSaveLoading.value = true;
        await fixScreenshots();
        await saveWorksApi(getPageDataParams());
        globalFunc.$message.success({
          message: "保存成功",
          type: "success",
        });
      } catch (error) {
      } finally {
        isSaveLoading.value = false;
      }
    };

    // 发布
    let pushHandler = async () => {
      try {
        isPushLoading.value = true;
        await fixScreenshots();
        await saveWorksApi(getPageDataParams());
        isPublish.value = true;
      } catch (error) {
      } finally {
        isPushLoading.value = false;
      }
    };
    return {
      pageData,
      preHandler,
      saveHandler,
      pushHandler,
      isPushLoading,
      isSaveLoading,
      isPreLoading,
      isPublish,
      isPreview,
    };
  },
});
</script>

<style lang="scss" scoped>
.header {
  height: 100%;
  padding: 0 50px;
  background: #001529;
  box-sizing: border-box;
  box-shadow: 0 10px 15px rgb(0 0 0 / 10%);
}
</style>
